<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <div class='calculation-box'>
    <p>Draw a polygon using the draw tools.</p>
    <div id='calculated-area'></div>
    <button id="black-color" @click="changeColor('black')">Change to Black</button>
    <button id="red-color" @click="changeColor('red')">Change to Red</button>
    <button id="green-color" @click="changeColor('green')">Change to Green</button>
  </div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "UserDrawPolygon.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});

    let draw = ref(null)
    let drawFeatureID = '';
    let newDrawFeature = false;

    const updateArea = (e) => {
      let data = draw.value.getAll();
      let answer = document.getElementById('calculated-area');
      if (data.features.length > 0) {
        let area = turf.area(data);
        // restrict to area to 2 decimal points
        let rounded_area = Math.round(area * 100) / 100;
        answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
      } else {
        answer.innerHTML = '';
        if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
      }
    }

    // callback for draw.update and draw.selectionchange
    const setDrawFeature = (e) => {
      if (e.features.length && e.features[0].type === 'Feature') {
        let feat = e.features[0];
        drawFeatureID = feat.id;
      }
    }

    //change colors
    const changeColor = (color) => {
      if (drawFeatureID !== '' && typeof draw.value === 'object') {

        // add whatever colors you want here...
        if (color === 'black') {
          draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#000');
        } else if (color === 'red') {
          draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#ff0000');
        } else if (color === 'green') {
          draw.value.setFeatureProperty(drawFeatureID, 'portColor', '#008000');
        }

        let feat = draw.value.get(drawFeatureID);
        draw.value.add(feat)
      }
    }

    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // 使用 mapbox-gl-draw 和 Turf.js 来分别绘制多边形和计算其（以平方米为单位的）面积。
      draw.value = new MapboxDraw({
        // this is used to allow for custom properties for styling
        // it appends the word "user_" to the property
        userProperties: true,
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true
        },
        styles: [
          // default themes provided by MB Draw
          // default themes provided by MB Draw
          // default themes provided by MB Draw
          // default themes provided by MB Draw


          {
            'id': 'gl-draw-polygon-fill-inactive',
            'type': 'fill',
            'filter': ['all', ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static']
            ],
            'paint': {
              'fill-color': '#3bb2d0',
              'fill-outline-color': '#3bb2d0',
              'fill-opacity': 0.1
            }
          },
          {
            'id': 'gl-draw-polygon-fill-active',
            'type': 'fill',
            'filter': ['all', ['==', 'active', 'true'],
              ['==', '$type', 'Polygon']
            ],
            'paint': {
              'fill-color': '#e50d0d',
              'fill-outline-color': '#e50d0d',
              'fill-opacity': 0.1
            }
          },
          {
            'id': 'gl-draw-polygon-midpoint',
            'type': 'circle',
            'filter': ['all', ['==', '$type', 'Point'],
              ['==', 'meta', 'midpoint']
            ],
            'paint': {
              'circle-radius': 3,
              'circle-color': '#e50d0d'
            }
          },
          {
            'id': 'gl-draw-polygon-stroke-inactive',
            'type': 'line',
            'filter': ['all', ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#3bb2d0',
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-polygon-stroke-active',
            'type': 'line',
            'filter': ['all', ['==', 'active', 'true'],
              ['==', '$type', 'Polygon']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#e50d0d',
              'line-dasharray': [0.2, 2],
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-line-inactive',
            'type': 'line',
            'filter': ['all', ['==', 'active', 'false'],
              ['==', '$type', 'LineString'],
              ['!=', 'mode', 'static']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#3bb2d0',
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-line-active',
            'type': 'line',
            'filter': ['all', ['==', '$type', 'LineString'],
              ['==', 'active', 'true']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#e50d0d',
              'line-dasharray': [0.2, 2],
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
            'type': 'circle',
            'filter': ['all', ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static']
            ],
            'paint': {
              'circle-radius': 5,
              'circle-color': '#fff'
            }
          },
          {
            'id': 'gl-draw-polygon-and-line-vertex-inactive',
            'type': 'circle',
            'filter': ['all', ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static']
            ],
            'paint': {
              'circle-radius': 3,
              'circle-color': '#e50d0d'
            }
          },
          {
            'id': 'gl-draw-point-point-stroke-inactive',
            'type': 'circle',
            'filter': ['all', ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static']
            ],
            'paint': {
              'circle-radius': 5,
              'circle-opacity': 1,
              'circle-color': '#fff'
            }
          },
          {
            'id': 'gl-draw-point-inactive',
            'type': 'circle',
            'filter': ['all', ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static']
            ],
            'paint': {
              'circle-radius': 3,
              'circle-color': '#3bb2d0'
            }
          },
          {
            'id': 'gl-draw-point-stroke-active',
            'type': 'circle',
            'filter': ['all', ['==', '$type', 'Point'],
              ['==', 'active', 'true'],
              ['!=', 'meta', 'midpoint']
            ],
            'paint': {
              'circle-radius': 7,
              'circle-color': '#fff'
            }
          },
          {
            'id': 'gl-draw-point-active',
            'type': 'circle',
            'filter': ['all', ['==', '$type', 'Point'],
              ['!=', 'meta', 'midpoint'],
              ['==', 'active', 'true']
            ],
            'paint': {
              'circle-radius': 5,
              'circle-color': '#e50d0d'
            }
          },
          {
            'id': 'gl-draw-polygon-fill-static',
            'type': 'fill',
            'filter': ['all', ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon']
            ],
            'paint': {
              'fill-color': '#404040',
              'fill-outline-color': '#404040',
              'fill-opacity': 0.1
            }
          },
          {
            'id': 'gl-draw-polygon-stroke-static',
            'type': 'line',
            'filter': ['all', ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#404040',
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-line-static',
            'type': 'line',
            'filter': ['all', ['==', 'mode', 'static'],
              ['==', '$type', 'LineString']
            ],
            'layout': {
              'line-cap': 'round',
              'line-join': 'round'
            },
            'paint': {
              'line-color': '#404040',
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-point-static',
            'type': 'circle',
            'filter': ['all', ['==', 'mode', 'static'],
              ['==', '$type', 'Point']
            ],
            'paint': {
              'circle-radius': 5,
              'circle-color': '#404040'
            }
          },

          // end default themes provided by MB Draw
          // end default themes provided by MB Draw
          // end default themes provided by MB Draw
          // end default themes provided by MB Draw


          // new styles for toggling colors
          // new styles for toggling colors
          // new styles for toggling colors
          // new styles for toggling colors

          {
            'id': 'gl-draw-polygon-color-picker',
            'type': 'fill',
            'filter': ['all', ['==', '$type', 'Polygon'],
              ['has', 'user_portColor']
            ],
            'paint': {
              'fill-color': ['get', 'user_portColor'],
              'fill-outline-color': ['get', 'user_portColor'],
              'fill-opacity': 0.5
            }
          },
          {
            'id': 'gl-draw-line-color-picker',
            'type': 'line',
            'filter': ['all', ['==', '$type', 'LineString'],
              ['has', 'user_portColor']
            ],
            'paint': {
              'line-color': ['get', 'user_portColor'],
              'line-width': 2
            }
          },
          {
            'id': 'gl-draw-point-color-picker',
            'type': 'circle',
            'filter': ['all', ['==', '$type', 'Point'],
              ['has', 'user_portColor']
            ],
            'paint': {
              'circle-radius': 3,
              'circle-color': ['get', 'user_portColor']
            }
          },

        ]
      })
      map.addControl(draw.value)

      map.on('draw.create', updateArea);
      map.on('draw.delete', updateArea);
      map.on('draw.update', updateArea);

      map.on('draw.create', function () {
        newDrawFeature = true;
      });
      map.on('draw.update', setDrawFeature);
      map.on('draw.selectionchange', setDrawFeature);
      map.on('click', (e) => {
        if (!newDrawFeature) {
          let drawFeatureAtPoint = draw.value.getFeatureIdsAt(e.point);

          //if another drawFeature is not found - reset drawFeatureID
          drawFeatureID = drawFeatureAtPoint.length ? drawFeatureAtPoint[0] : '';
        }

        newDrawFeature = false;

      });
    };

    return {
      mapOnLoadCB,
      changeColor
    }
  }
}
</script>

<style scoped lang="scss">
.calculation-box {
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 40px;
  left: 10px;
  background-color: rgba(255, 255, 255, .9);
  padding: 15px;
  text-align: center;

  p {
    margin: 0;
    font-size: 13px;
  }

  #black-color, #red-color, #green-color {
    z-index: 1005;
    position: absolute;
    right: 5px;
    color: white;
  }

  #black-color {
    bottom: 10px;
    background-color: black;
  }

  #red-color {
    bottom: 35px;
    background-color: red;
  }

  #green-color {
    bottom: 60px;
    background-color: green;
  }
}
</style>